<script setup lang="ts">
import { getClassInfoById } from '@/api/class';
import { Cls } from '@/api/class/type';
import Header from '@/components/Header.vue';
import { onBeforeMount, ref } from 'vue';
import { useRoute } from 'vue-router';
import DeviceList from './components/DeviceList.vue';

const classId = ref('');
const classInfo = ref({} as Cls);

onBeforeMount(() => {
    const route = useRoute();
    const id = route.query.id;
    if (!Array.isArray(id)) {
        classId.value = id as string;
        getClassInfoById(classId.value).then((res) => {
            classInfo.value = res.data;
        })
    }
})

</script>

<template>
    <div class="container">
        <Header :name="classInfo.name"></Header>
        <div class="content">
            <DeviceList v-model="classId"></DeviceList>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    .content {

    }
}
</style>